<template>
	<div class="play-warp VBox">
    <div class="header">
      <div class="reHome"><a href="/home">首页</a></div>
      <span>
        <a href="/shop/findeNew" >视频</a>
      </span>
      <span class="tactive">
        <router-link to="/backPlayList">直播</router-link>
      </span>
    </div>
    <div class="play-tab">
      <router-link id="listTab" class="tab-nav active" to="/"><i></i>当家直播</router-link>
      <router-link id="backPlayListTab" class="tab-nav" to="/backPlayList"><i></i>精彩回放</router-link>
    </div>
    <div class="play-list" v-infinite-scroll="getList" infinite-scroll-disabled="loading" infinite-scroll-distance="10" >
      <div class="play-box" v-for="item in newList">
        <div class="play-row">
          <router-link class="play-item" :style="{ background: 'url('+item.coverUrl+') center no-repeat', backgroundSize: '100%'}" v-for="(item, index) in item" :key="item.id" v-if="index === 0 && item.status === 1" :to="{name: 'Player', query: {id: item.id}}">
            <div class="play-mask"></div>
            <div class="player-info">
              <router-link :to="{name: 'User', query: {sellerId: item.sellerId}}">
                <span class="player-img">
                    <img :src="item.avatar" v-if="item.avatar"/>
                    <img src="../assets/img/defaultImg.jpeg" v-else/>
                  </span>
              </router-link>
              <span>
                  <p class="player-name">{{item.nickname}}</p>
                  <p class="player-city"><i class="icon"></i>&nbsp;{{item.address}}</p>
                </span>
            </div>

            <div class="play-tit">{{item.title}}</div>
            <div class="play-time" v-if="item.status === 0">
              <div class="playing trailer">预告</div><span class="playing-say">{{formatDate(item.startDate)}}开播</span>
            </div>
            <div class="play-time" v-if="item.status === 1">
              <div class="playing" v-if="item.status === 1">直播中</div><span class="playing-say">{{item.totalMemberNum}}人观看</span>
            </div>
            <div class="play-love" v-if="item.status === 1">
              <p class="img-p">
                <img src="../assets/img/livepage_icon.png">
              </p>
              <p>{{item.likeNum}}</p>
            </div>
          </router-link>

          <router-link class="play-item" :style="{ background: 'url('+item.coverUrl+') center no-repeat', backgroundSize: '100%'}" v-for="(item, index) in item" :key="item.id" v-if="index === 0 && item.status === 0" :to="{name: 'YuGao', query: {id: item.id}}">
            <div class="play-mask"></div>
            <div class="player-info">
              <router-link :to="{name: 'User', query: {sellerId: item.sellerId}}">
                <span class="player-img">
                    <img :src="item.avatar" v-if="item.avatar"/>
                    <img src="../assets/img/defaultImg.jpeg" v-else/>
                  </span>
              </router-link>
              <span>
                  <p class="player-name">{{item.nickname}}</p>
                  <p class="player-city"><i class="icon"></i> {{item.address}}</p>
                </span>
            </div>

            <div class="play-tit">{{item.title}}</div>
            <div class="play-time" v-if="item.status === 0">
              <div class="playing trailer">预告</div><span class="playing-say">{{formatDate(item.startDate)}}开播</span>
            </div>
            <div class="play-time" v-if="item.status === 1">
              <div class="playing" v-if="item.status === 1">直播中</div><span class="playing-say">{{item.totalMemberNum}}人观看</span>
            </div>

            <div class="play-love" v-if="item.status === 1">
              <p class="img-p">
                <img src="../assets/img/livepage_icon.png">
              </p>
              <p>{{item.likeNum}}</p>
            </div>
          </router-link>
        </div>
        <div class="play-row">
          <router-link class="play-item" :style="{ background: 'url('+item.coverUrl+') center no-repeat', backgroundSize: '100%'}" :to="{name: 'Player', query: {id: item.id}}" v-for="(item, index) in item" :key="item.id" v-if="index === 1 && item.status === 1">
            <div class="play-mask"></div>
            <div class="play-tit">{{item.title}}</div>
            <div class="play-time" v-if="item.status === 0">
              <div class="playing trailer">预告</div><span class="playing-say">{{formatDate(item.startDate)}}开播</span>
            </div>
            <div class="play-time" v-if="item.status === 1">
              <div class="playing" v-if="item.status === 1">直播中</div><span class="playing-say">{{item.totalMemberNum}}人观看</span>
            </div>
          </router-link>
          <router-link class="play-item" :style="{ background: 'url('+item.coverUrl+') center no-repeat', backgroundSize: '100%'}" :to="{name: 'YuGao', query: {id: item.id}}" v-for="(item, index) in item" :key="item.id" v-if="index === 1 && item.status === 0">
            <div class="play-mask"></div>
            <div class="play-tit">{{item.title}}</div>
            <div class="play-time" v-if="item.status === 0">
              <div class="playing trailer">预告</div><span class="playing-say">{{formatDate(item.startDate)}}开播</span>
            </div>
            <div class="play-time" v-if="item.status === 1">
              <div class="playing" v-if="item.status === 1">直播中</div><span class="playing-say">{{item.totalMemberNum}}人观看</span>
            </div>
          </router-link>

          <router-link class="play-item" :style="{ background: 'url('+item.coverUrl+') center no-repeat', backgroundSize: '100%'}" :to="{name: 'Player', query: {id: item.id}}" v-for="(item, index) in item" :key="item.id" v-if="index === 2 && item.status === 1">
            <div class="play-mask"></div>
            <div class="play-tit">{{item.title}}</div>
            <div class="play-time" v-if="item.status === 0">
              <div class="playing trailer">预告</div><span class="playing-say">{{formatDate(item.startDate)}}开播</span>
            </div>
            <div class="play-time" v-if="item.status === 1">
              <div class="playing" v-if="item.status === 1">直播中</div><span class="playing-say">{{item.totalMemberNum}}人观看</span>
            </div>
          </router-link>
          <router-link class="play-item" :style="{ background: 'url('+item.coverUrl+') center no-repeat', backgroundSize: '100%'}" :to="{name: 'YuGao', query: {id: item.id}}" v-for="(item, index) in item" :key="item.id" v-if="index === 2 && item.status === 0">
            <div class="play-mask"></div>
            <div class="play-tit">{{item.title}}</div>
            <div class="play-time" v-if="item.status === 0">
              <div class="playing trailer">预告</div><span class="playing-say">{{formatDate(item.startDate)}}开播</span>
            </div>
            <div class="play-time" v-if="item.status === 1">
              <div class="playing" v-if="item.status === 1">直播中</div><span class="playing-say">{{item.totalMemberNum}}人观看</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 数据为空时提示 -->
    <div class="emptyBox js_emptyBox Bflex1" style="display: none">
      <figure><img src="../assets/img/liveend_cartonperson.png" alt=""></figure>
    </div>

  </div>
</template>

<script>
	import util from '../common/util.js';
	export default {
		data() {
			return {
				backgroundUrl1: '../static/img/back-img.png',
				backgroundUrl2: '../static/img/default_cover.jpg',
				loading: false,
				pageNum: 0,
				total: 0,
				pages: 0,
				hasNextPage: true,
				list: [],
				newList: [],
				params: {
					currentPage: 1,
					pageSize: 10,
					type: 0,
					liveClassId: 1
				}
			}
		},
		components: {},
		computed: {},
		beforeMount() {

		},
		mounted() {
			/*$("#listTab").addClass("active");
			$("#backPlayListTab").removeClass("active");*/
			this.getList();
		},
		activated() {

		},
		methods: {
			formatDate: util.formatDate0,
			/**
			 * 获取直播列表
			 */
			getList() {
				if ( !this.hasNextPage ) {
					return;
				}
				this.loading = true;
				this.httpPost( this.API.list, this.params ).then( ( res ) => {
					if ( res ) {
						this.loading = false;
						let data = res.data;
						this.hasNextPage = data.hasNextPage;
						this.pageNum = data.pageNum;
						this.pages = data.pages;
						this.total = data.total;
						this.list = this.list.concat( data.list );
						this.newList = this.handleList();
						if (this.params.currentPage < 2 && this.newList.length == 0) {
                           $('.js_emptyBox').show();
                        }
                        else {
                          this.params.currentPage++;
                        }
					}
				} )
			},

			handleList() {
				let newList = [];
				let arr = [];
				this.list.forEach( ( item, index ) => {
					if ( index % 3 === 0 && index != 0 ) {
						newList.push( arr );
						arr = [];
						arr.push( item );
						if ( index === ( this.list.length - 1 ) ) {
							newList.push( arr );
						}
					} else {
						arr.push( item );
						if ( index === ( this.list.length - 1 ) ) {
							newList.push( arr );
						}
					}
				} )
				return newList;
			},

			/**
			 * 跳转到直播间
			 */
			gotoPlayer( evt, item ) {
				// evt.preventDefault()
				this.$router.push( {
					name: 'Player',
					query: {
						playInfo: JSON.stringify( item )
					}
				} )
			}

		}
	}
</script>

<style lang="scss" scoped></style>
